import 'package:flutter/material.dart';
import 'package:flutter_demo/datas/home_banner_data.dart';
import 'package:flutter_demo/pages/home/home_vm.dart';
import 'package:flutter_demo/pages/web_view_page.dart';
import 'package:flutter_demo/route/RouteUtils.dart';
import 'package:flutter_demo/route/routes.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_swiper_view/flutter_swiper_view.dart';
import 'package:provider/provider.dart';

// 首页页面组件（有状态组件，用于轮播图等动态内容）
class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  HomeViewModel viewModel = HomeViewModel();
  @override
  void initState() {
    super.initState();
    viewModel.getBanner();
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<HomeViewModel>(create:(context){
      return viewModel;
    },child:Scaffold(
// 安全区域：避免内容被刘海屏/状态栏遮挡
      body: SafeArea(
          child: SingleChildScrollView(
            child: Column(
                children: [
                  _banner(),
// 其他页面内容可以继续在Column中添加...
                  ListView.builder(//高度占满剩余的高度
                    physics: NeverScrollableScrollPhysics(),
                    shrinkWrap: true,//让可以计算高度。
                    itemBuilder: (context, index) {
                      return _listItemView();
                    },
                    itemCount: 100,
                  )
                ]),
          )),
    ));
  }

  Widget _banner(){
    return   // 轮播图容器
      Consumer<HomeViewModel>(builder:(context,vm,child){
        return SizedBox(
          height: 150.h, // 使用屏幕适配库设置高度
          width: double.infinity, // 充满父容器宽度
          child: Swiper(
            indicatorLayout: PageIndicatorLayout.NONE,
            autoplay: true,
            // 开启自动轮播
            // 分页指示器配置（底部小圆点）
            pagination: SwiperPagination(
                alignment: Alignment.bottomCenter, // 位置在底部居中
                margin: EdgeInsets.only(bottom: 10.h) // 底部间距
            ),

            // 左右导航按钮配置
            control: SwiperControl(
                color: Colors.blue, // 按钮颜色
                padding: EdgeInsets.all(10.h) // 按钮内边距
            ),
            itemCount: vm.bannerList?.length??0,
            // 轮播项数量
            // 轮播项构建器
            itemBuilder: (context, index) {
              return Container(
                color: Colors.lightBlue, // 轮播项背景色
                child: Center(
                  child: Image.network(vm.bannerList?[index].imagePath??"",fit: BoxFit.fill,),
                ),
              );
            },
          ),
        );
      });
  }
  Widget _listItemView(){
    return
    GestureDetector(onTap: (){
      RouteUtils.pushForNamed(context,RoutePath.webViewPage,arguments: {
        "name":"使用路由传值"
      });
      // Navigator.pushNamed(context, RoutePath.webViewPage);
    },child: Container(//有边框功能
        margin: EdgeInsets.only(top:5.r,bottom: 5.r,right: 10.w,left: 10.w),
        padding: EdgeInsets.only(top:15.r,bottom: 15.r,right: 10.w,left: 10.w),
        decoration: BoxDecoration(border: Border.all(color: Colors.black12,width: 0.5.r),
            borderRadius: BorderRadius.all(Radius.circular(10.r))),
        child:Column(children: [
          Row(children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(40.r),
              child:  Image.network(
                "https://wx1.sinaimg.cn/mw690/79c52085ly1htxo3mryljj20tz1b6n92.jpg",
                width: 80.r,
                height: 80.r,
                fit: BoxFit.fill,
              ),
            ),
            SizedBox(width: 5.w),
            Text("作者",style: TextStyle(color: Colors.black),),
            Expanded(child: SizedBox()),
            Text("2024-12-12 12:19",style: TextStyle(color: Colors.black),),
            SizedBox(width: 5.w),
            Text("置顶",style: TextStyle(color: Colors.blue,fontWeight: FontWeight.bold),),

          ],),
          Text("标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题",style: TextStyle(color: Colors.black),),
          Row(children: [
            Text("干货资源",style: TextStyle(color: Colors.green,fontSize: 22.sp),),
            Expanded(child: SizedBox()),
            Image.asset(
                "assets/images/collect.png",width: 70.r,height: 70.r),
          ],)
        ])
    ) ,);


  }
}
